// React.memo的使用，防止组件不必要的渲染，当子组件props没有变化时，不重新渲染子组件
// 1.传递一个 简单类型 的props，props变化时组件重新渲染
// 2.传递一个 引用类型 的props，比较的是新值和旧值的引用是否相等。当父组件的函数重新执行时，实际上形成的是新的数组引用
// 3.保证引用稳定->使用useMemo组件渲染的过程中缓存一个值

import { useState, memo, useMemo } from "react"

// 使用memo函数进行缓存，只有props发生变化的时候，才会重新渲染
const MemoSon = memo(function Son({ list }) {
  console.log("我是子组件，我重新渲染了")
  return <div>this is Son, {list}</div>

})

function App() {
  const [count, setCount] = useState(0)

  // const list = [1, 2, 3, 4] // 情况2
  const list = useMemo(() => { // 情况3
    return [1, 2, 3]
  }, [])

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+{count}</button>
      {/* <Son /> */}
      <MemoSon list={list} />

    </div>
  )
}
export default App